/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="gpu-card">
        <div class="gpu-card-top">
            <div class="gpu-card-top__left">
                <div class="gpu-card-top__value">
                       <span>{{ data.usage }}</span>
                       <template v-if="type===XIANCUN_VALUE">
                           <span class="gpu-card-top__value--ignore">GB</span>
                           <span>/{{ data.sum }}</span>
                           <span class="gpu-card-top__value--ignore">GB</span>
                       </template>
                </div>
                <div class="gpu-card-top__label">当前GPU利用率</div>
            </div>
            <img class="cpu-card-top__right" src="./img/Gpu.png" alt="">
        </div>
        <el-divider/>
        <div class="gpu-card-charts">
            <div class="gpu-card-charts__opt">
                <sf-radio-group v-model="type">
                    <sf-radio-button v-for="(item, index) in TYPE_OPTIONS_HOME" :key="index" :check-value="item.value">
                        {{ item.label }}
                    </sf-radio-button>
                </sf-radio-group>
            </div>
            <charts :time="time" :type="type===XIANCUN_VALUE?'GB':'VGPU_RATIO'" :lineChartsData="data.list"/>
        </div>
    </div>
</template>

<script>
import IntervalTask from 'src/util/interval_task';
import Charts from './charts.vue';
import {
    XIANCUN_VALUE, TYPE_OPTIONS_HOME
} from 'src/home/mod_cluster/common/resource/const.js';

export default {
    components: {Charts},
    props: {
        id: {
            type: String,
            default: ''
        },
        time: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            data: {},
            type: XIANCUN_VALUE
        }
    },
    computed: {
        url() {
            return this.type === XIANCUN_VALUE ? '/notebooks/v1/notebooks/show-vgpu-usage' : '/notebooks/v1/notebooks/show-ratio-usage'
        },
        TYPE_OPTIONS_HOME() {
            return TYPE_OPTIONS_HOME
        },
        XIANCUN_VALUE() {
            return XIANCUN_VALUE;
        }
        
    },
    watch: {
        id() {
            this._createIntervalTask()
        },
        time() {
            this.getData()
        },
        url() {
            this.getData()
        }
    },
    methods: {
        async getData() {
            const {success, data, msg} = await this.$ajax.post(this.url, {
                id: this.id,
                timeUnit: this.time
            })
            if (!success) {
                this.$showErr(msg);
                this._stopIntervalTask();
                return;
            }
            this.data = data;
        },
        _createIntervalTask() {
            let vm = this;
            this.intervalTask = new IntervalTask({
                fn: () => {
                    vm.getData().then(() => {
                        vm.intervalTask && vm.intervalTask.next();
                    });
                },
                interval: 10000,
                autoStart: true
            });
        },
        _stopIntervalTask() {
            this.intervalTask.stop();
            this.intervalTask = null;
        }
    },
    beforeDestroy() {
        if (this.intervalTask) {
            this._stopIntervalTask();
        }
    },
    
}
</script>

<style lang="less" scoped>
.gpu-card {
    width: 100%;
    height: 100%;
    
    &-top {
        display: flex;
        justify-content: space-between;
        color: #3D3D3D;
        
        &__value {
            margin: 8px 0;
            height: 28px;
            font-size: 20px;
            text-align: center;
            
            &--ignore {
                height: 17px;
                font-size: 12px;
            }
        }
        
        &__lable {
            height: 17px;
            font-size: 12px;
        }
    }
    
    .el-divider {
        margin: 12px 0 16px 0;
    }
    
    &-charts {
        position: relative;
        height: 195px;
        
        &__opt {
            position: absolute;
            z-index: 1;
            top: -8px;
            right: 0;
            
            .sfv-radio-button {
                min-width: 45px;
                padding: 0;
                height: 24px;
            }
        }
    }
}
</style>
